<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="../jquery.js"></script>
<style type="text/css">
*{
	margin:0;
	padding: 0;
}
body{
	overflow: hidden;
}
#textBox{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -999;
}
.showRoll #frame {
    border-color: hsl(0,0%,70%);
    position: absolute;
}
#box{
	width: 641px;
	height: 483px;
	background: url(bg.jpg);
	border: 1px solid #ddd;
	position: relative;
	color: #fff;
	overflow: hidden;
}
#frame {
    width: 70px;
    height: 92px;
    left:370px;
    top:240px;
    position: absolute;
    border: 1px solid transparent;
    background: url(mhxy.png) no-repeat left top;
    -webkit-animation: anm-down 1s steps(8) infinite;
       -moz-animation: anm-down 1s steps(8) infinite;
        -ms-animation: anm-down 1s steps(8) infinite;
         -o-animation: anm-down 1s steps(8) infinite;
            animation: anm-down 1s steps(8) infinite;
}
@-webkit-keyframes anm-down { 0% { background-position: 0px 0; } 100% { background-position: -560px 0; } }
   @-moz-keyframes anm-down { 0% { background-position: 0px 0; } 100% { background-position: -560px 0; } }
    @-ms-keyframes anm-down { 0% { background-position: 0px 0; } 100% { background-position: -560px 0; } }
     @-o-keyframes anm-down { 0% { background-position: 0px 0; } 100% { background-position: -560px 0; } }
        @keyframes anm-down { 0% { background-position: 0px 0; } 100% { background-position: -560px 0; } }

@-webkit-keyframes anm-left { 0% { background-position: 0px -92px; } 100% { background-position: -560px -92px; } }
   @-moz-keyframes anm-left { 0% { background-position: 0px -92px; } 100% { background-position: -560px -92px; } }
    @-ms-keyframes anm-left { 0% { background-position: 0px -92px; } 100% { background-position: -560px -92px; } }
     @-o-keyframes anm-left { 0% { background-position: 0px -92px; } 100% { background-position: -560px -92px; } }
        @keyframes anm-left { 0% { background-position: 0px -92px; } 100% { background-position: -560px -92px; } }

@-webkit-keyframes anm-right { 0% { background-position: 0px -184px; } 100% { background-position: -560px -184px; } }
   @-moz-keyframes anm-right { 0% { background-position: 0px -184px; } 100% { background-position: -560px -184px; } }
    @-ms-keyframes anm-right { 0% { background-position: 0px -184px; } 100% { background-position: -560px -184px; } }
     @-o-keyframes anm-right { 0% { background-position: 0px -184px; } 100% { background-position: -560px -184px; } }
        @keyframes anm-right { 0% { background-position: 0px -184px; } 100% { background-position: -560px -184px; } }

@-webkit-keyframes anm-up { 0% { background-position: 0px -276px; } 100% { background-position: -560px -276px; } }
   @-moz-keyframes anm-up { 0% { background-position: 0px -276px; } 100% { background-position: -560px -276px; } }
    @-ms-keyframes anm-up { 0% { background-position: 0px -276px; } 100% { background-position: -560px -276px; } }
     @-o-keyframes anm-up { 0% { background-position: 0px -276px; } 100% { background-position: -560px -276px; } }
        @keyframes anm-up { 0% { background-position: 0px -276px; } 100% { background-position: -560px -276px; } }

@-webkit-keyframes anm-ld { 0% { background-position: 0px -368px; } 100% { background-position: -560px -368px; } }
   @-moz-keyframes anm-ld { 0% { background-position: 0px -368px; } 100% { background-position: -560px -368px; } }
    @-ms-keyframes anm-ld { 0% { background-position: 0px -368px; } 100% { background-position: -560px -368px; } }
     @-o-keyframes anm-ld { 0% { background-position: 0px -368px; } 100% { background-position: -560px -368px; } }
        @keyframes anm-ld { 0% { background-position: 0px -368px; } 100% { background-position: -560px -368px; } }

@-webkit-keyframes anm-rd { 0% { background-position: 0px -460px; } 100% { background-position: -560px -460px; } }
   @-moz-keyframes anm-rd { 0% { background-position: 0px -460px; } 100% { background-position: -560px -460px; } }
    @-ms-keyframes anm-rd { 0% { background-position: 0px -460px; } 100% { background-position: -560px -460px; } }
     @-o-keyframes anm-rd { 0% { background-position: 0px -460px; } 100% { background-position: -560px -460px; } }
        @keyframes anm-rd { 0% { background-position: 0px -460px; } 100% { background-position: -560px -460px; } }

@-webkit-keyframes anm-lu { 0% { background-position: 0px -552px; } 100% { background-position: -560px -552px; } }
   @-moz-keyframes anm-lu { 0% { background-position: 0px -552px; } 100% { background-position: -560px -552px; } }
    @-ms-keyframes anm-lu { 0% { background-position: 0px -552px; } 100% { background-position: -560px -552px; } }
     @-o-keyframes anm-lu { 0% { background-position: 0px -552px; } 100% { background-position: -560px -552px; } }
        @keyframes anm-lu { 0% { background-position: 0px -552px; } 100% { background-position: -560px -552px; } }

@-webkit-keyframes anm-ru { 0% { background-position: 0px -644px; } 100% { background-position: -560px -644px; } }
   @-moz-keyframes anm-ru { 0% { background-position: 0px -644px; } 100% { background-position: -560px -644px; } }
    @-ms-keyframes anm-ru { 0% { background-position: 0px -644px; } 100% { background-position: -560px -644px; } }
     @-o-keyframes anm-ru { 0% { background-position: 0px -644px; } 100% { background-position: -560px -644px; } }
        @keyframes anm-ru { 0% { background-position: 0px -644px; } 100% { background-position: -560px -644px; } }

</style>
<title>test</title>
</head>
<body>
	<div id="box">
		<div id="frame"></div>
		<input id="textBox" type="text" />
	</div>
    
    <script type="text/javascript">
    	function setAnm (str){
    		switch (str){
    			case 'left':{
    				$("#frame").css({"animation":"anm-left 1s steps(8) infinite"});
    				break;
    			}
    			case 'right':{
    				$("#frame").css({"animation":"anm-right 1s steps(8) infinite"});
    				break;
    			}
    			case 'up':{
    				$("#frame").css({"animation":"anm-up 1s steps(8) infinite"});
    				break;
    			}
    			case 'down':{
    				$("#frame").css({"animation":"anm-down 1s steps(8) infinite"});
    				break;
    			}
    			case 'lu':{
    				$("#frame").css({"animation":"anm-lu 1s steps(8) infinite"});
    				break;
    			}
    			case 'ld':{
    				$("#frame").css({"animation":"anm-ld 1s steps(8) infinite"});
    				break;
    			}
    			case 'ru':{
    				$("#frame").css({"animation":"anm-ru 1s steps(8) infinite"});
    				break;
    			}
    			case 'rd':{
    				$("#frame").css({"animation":"anm-rd 1s steps(8) infinite"});
    				break;
    			}
    		}
    	}
    	var data = {
    		x:0,
    		y:0,
    		l:false,
    		r:false,
    		u:false,
    		d:false,
    		time:null
    	}
    	function move(){
    		trans = "translate("+data.x*50+"px,"+data.y*50+"px)";
		  	$('#frame').css({"transform":trans,"transition":"all 0.3s linear"});
    	}
    	function diff(){
    		var newTime = +new Date;
			if(!data.time){
				data.time = newTime;
			}
			var diff = newTime-data.time;
			return diff;
    	}
		$(window).keydown(function(event){
		  	var keycode = event.which;
		  	if(keycode==37){
		  		if(data.l) return;
		  		var isRun = diff();
		  		console.log(isRun);
		  		data.l=true;
		  		if(data.u){
		  			setAnm("lu");
		  			data.x--;
		  			if(isRun>480)
		  			data.y--;
		  		}else if(data.d){
		  			setAnm("ld");
		  			data.x--;
		  			if(isRun>480)
		  			data.y++;
		  		}else{
		  			setAnm("left");
			  		data.x--;
		  		}
		  	}else if(keycode==38){
		  		if(data.u) return;
		  		var isRun = diff();
		  		console.log(isRun);
		  		data.u=true;
		  		if(data.l){
		  			setAnm("lu");
		  			if(isRun>480)
		  			data.x--;
		  			data.y--;
		  		}else if(data.r){
		  			setAnm("ru");
		  			if(isRun>480)
		  			data.x++;
		  			data.y--;
		  		}else{
		  			setAnm("up");
			  		data.y--;
		  		}
		  	}else if(keycode==39){
		  		if(data.r) return;
		  		var isRun = diff();
		  		console.log(isRun);
		  		data.r=true;
		  		if(data.u){
		  			setAnm("ru");
		  			data.x++;
		  			if(isRun>480)
		  			data.y--;
		  		}else if(data.d){
		  			setAnm("rd");
		  			data.x++;
		  			if(isRun>480)
		  			data.y++;
		  		}else{
		  			setAnm("right");
			  		data.x++;
		  		}
		  	}else if(keycode==40){
		  		if(data.d) return;
		  		var isRun = diff();
		  		console.log(isRun);
		  		data.d=true;
		  		if(data.l){
		  			setAnm("ld");
		  			if(isRun>480)
		  			data.x--;
		  			data.y++;
		  		}else if(data.r){
		  			setAnm("rd");
		  			if(isRun>480)
		  			data.x++;
		  			data.y++;
		  		}else{
		  			setAnm("down");
			  		data.y++;
		  		}
		  	}
		  	move();
		}).keyup(function(){
			data.l = data.r = data.u = data.d = false;
			data.time = null;
		});
    </script>
</body>
</html>